<template>
  <el-container>
    <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div style="display: flex;flex-direction: row;    justify-content: space-between;width: 100%;">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">

              <div class="report_header_query">
                <el-input prefix-icon="el-icon-search" clearable @clear="clearType" placeholder="字典类型" v-model="query.dictType"></el-input>
              </div>
              <div class="report_header_query">
                <el-input prefix-icon="el-icon-search" clearable @clear="clearName"  placeholder="字典名"  v-model="query.name"></el-input>
              </div>
            </div>
            <div>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryAd">查询</el-button>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                       v-permission="['sysDict.add']">新增</el-button>
            </div>
          </div>
        </div>
    </el-header>
    <div class="pd10">
    <el-table
      :data="dictList"
      border
      v-loadMore="[payLoads,'sysDict-list']"
      style="width: 100%">
      <el-table-column
        label="排序"
        type="index"
        width="50"
        >
      </el-table-column>
      <el-table-column
        label="字典名称"
        prop="name"
        width="324.8"
      >
      </el-table-column>
      <el-table-column
        label="字典类型"
        align="center"
        prop="dictType"
        width="80"
      >
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        prop="status"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag type="success">
            <span>{{scope.row.status | watchStatus}}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="字典描述"
        prop="description"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="80">
        <template slot-scope="scope">
          <div>
            <el-tooltip class="item" v-permission="['sysDict.edit']" effect="dark" content="编辑" placement="top-start">
              <a @click="editClick(scope.row)">
                <i style="color: #409EFF" class="el-icon-edit"></i>
              </a>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" v-permission="['sysDict.del']" content="删除" placement="top-start">
              <a style="margin-left: 10px" @click="deleteAd(scope.row)">
                <i style="color: #F56C6C" class="el-icon-delete"></i>
              </a>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--新增标签-->
    <el-dialog title="新增字典" v-el-drag-dialog :visible.sync="dialogFormVisible" width="500px">
      <el-container>
        <el-main class="popup_content" style="" >
          <el-form ref="addSysDict" :model="addSysDict" label-width="80px" :rules="rules" size="mini" >
            <el-form-item label="字典名称" prop="name" >
              <el-input v-model="addSysDict.name" style="width: 120px" ></el-input>
            </el-form-item>
            <el-form-item label="字典类型" prop="dictType" >
              <el-input v-model="addSysDict.dictType" style="width: 120px" ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="addSysDict.status"  placeholder="请选择状态">
                <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
                <el-form-item label="字典描述" prop="dictType" >
                  <el-input v-model="addSysDict.description" ></el-input>
                </el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="clicked" @click="saveSysDict('addSysDict')">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑标签-->
    <el-dialog title="编辑字典" v-el-drag-dialog :visible.sync="editVisible" width="500px">
      <el-container>
        <el-main class="popup_content" >
          <el-form ref="editSysDict" :model="editSysDict" label-width="80px" :rules="rules" size="mini">
            <el-form-item label="字典名称" prop="name" >
              <el-input v-model="editSysDict.name" style="width: 120px" ></el-input>
            </el-form-item>
            <el-form-item label="字典类型" prop="dictType" >
              <el-input v-model="editSysDict.dictType" style="width: 120px" ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="editSysDict.status"  placeholder="请选择状态">
                <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字典描述" prop="dictType" >
              <el-input v-model="editSysDict.description" ></el-input>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="clicked" @click="updateSysDict('editSysDict')">确 定</el-button>
      </div>
    </el-dialog>
    </div>
    <el-footer class="el-footerBox">
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadSysDict"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import loadMore from '@/utils/loadMore.js'
  import { list, save, del, find, update } from '../../api/sysDict'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import Pagination from '@/components/Pagination';
  export default {
    directives: {elDragDialog,permission,loadMore},
    name: 'sysDict-list',
    activated() {
      this.payLoads = new Date().getTime();
    },
    data(){
      return{
        payLoads:'',
        dictList:[],
        total:0,
        queryType: true,
        clicked:false,
        dialogFormVisible:false,
        editVisible:false,
        rules: {
          name:[
            {required: true, message: '请输入等级名称', trigger: 'blur'},
          ],
          dictType:[
            {required: true, message: '请输入类型', trigger: 'blur'},
          ],
          description:[
            {required: true, message: '请输入描述', trigger: 'blur'},
          ]
        },
        pageNum:1,
        pageSize:20,
        addSysDict:{
          description:'',
          dictType:'',
          modifyDate:'',
          name:'',
          status:'',
          createDate:''
        },
        query:{
          name: '',
          dictType:''
        },
        keyword:{
          name:'',
        },
        dictType:{
          dictType:''
        },
        editSysDict:{
          id:'',
          description:'',
          dictType:'',
          modifyDate:'',
          name:'',
          status:'',
        },
        statusList:[
          {
            value: 0,
            label: '停用'
          }, {
            value: 1,
            label: '启用'
          }
        ]
      }
    },
    components:{
      Pagination
    },
    filters:{
      watchStatus(val){
        if (val===0){
          return '停用'
        }else if (val ===1){
          return '启用'
        }
      }
    },
    created() {
      this.loadSysDict()

    },
    mounted() {
      this.beforeMount()
    },
    methods:{
      clearType(){
        this.query.dictType=''
      },
      clearName(){
        this.query.name=''
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 266//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 220//减去页面上固定高度height
            }
          })();
        };
      },
      loadSysDict(){
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('dictType', this.dictType.dictType);
        params.append('name',this.keyword.name)
        list(params).then(response=>{
          console.log(response)
          this.dictList=response.data.data
          this.total=response.data.total
        }).catch(error=>{
          console.log(error)
        })
      },
      queryAd() {
        this.keyword.name = this.query.name;
        this.dictType.dictType=this.query.dictType
        this.pageNum = 1
        this.loadSysDict()
      },
      saveSysDict(addSysDict){
          this.$refs[addSysDict].validate((valid)=>{
            if (valid){
              this.clicked = true;
              var addSysDict={
                createDate:new Date(),
                description:this.addSysDict.description,
                dictType:this.addSysDict.dictType,
                modifyDate:new Date(),
                name:this.addSysDict.name,
                status:this.addSysDict.status
              }
              save(addSysDict).then(response=>{
                this.clicked=false;
                this.dialogFormVisible = false;
                this.loadSysDict()
              }).catch(error=>{
                console.log(error)
                this.clicked = false;
              })
            }else {
              return false
            }
          })

      },
      resetAd() {
        this.query.name = '';
        this.query.dictType='';
        this.keyword = this.query;
        this.dictType=this.query;
        this.pageNum = 1;
        this.loadSysDict()
      },
      deleteAd(data){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          del(data.id).then(response =>{
            this.loadSysDict()
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          })
        }).catch(error =>{
        });
      },
      addClick(){
        this.addSysDict.description=null,
        this.addSysDict.dictType='';
        this.addSysDict.name=null,
          this.addSysDict.status='',
          this.dialogFormVisible = true;
      },
      findSysDict(){
        find(this.editSysDict.id).then(response=>{
          console.log(response)
            this.editSysDict=response.data.sysDict
        })
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220//减去页面上固定高度height
        }
      },
      editClick(row){
        this.editSysDict.id=row.id
        this.findSysDict()
        this.editVisible = true
      },
      updateSysDict(editSysDict){
        this.$refs[editSysDict].validate((valid)=>{
          if (valid){
            this.clicked=true
            var editSysDict={
              id:this.editSysDict.id,
              description:this.editSysDict.description,
              dictType:this.editSysDict.dictType,
              modifyDate:new Date(),
              name:this.editSysDict.name,
              status:this.editSysDict.status,
            }
            update(editSysDict).then(response=>{
              console.log(response)
              this.clicked = false;
              this.editVisible = false;
              this.loadSysDict()
            }).catch(error=>{
              console.log(error)
              this.clicked = false;
            })
          }else{
            this.clicked = false;
          }
        })
      }
    }
  }
</script>

<style scoped>
  .popup_content {
    padding-bottom: 0px !important;
  }
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }

  /deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;

  }

  /deep/ .el-dialog__body {
    padding: 0px 20px !important;

  }

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
